<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html" charset="utf-8">
	<title>css sprite</title>
	<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$(window).scroll(function(){
				if($(window).scrollTop()>100)
				{
					$('.scroll-top').fadeIn(1500);
				}
				else
				{
					$('.scroll-top').fadeOut(1500);
				}
			});

			$('.scroll-top').click(function(){
				$('body,html').animate({scrollTop:0},1000);
				return false;
			});
		});
	</script>
	<style>
		.scroll-top{
			display: none;
			position: fixed;
			bottom: 100px;
			right: 80px
		}
		.scroll-top a{
			text-align: center;
			text-decoration: none;
			display: block;
			width: 64px;
			color:#d1d1d1;
		}
		scroll-top a:hover{
			cursor: pointer;
		}
		.scroll-top a span{
			background: transparent url('images/sprite.png') no-repeat -25px -290px;
			display: block;
			width:56px;
			height: 64px;
			margin-bottom: 5px;
		}
		.container{
			width:1100px;
			height: 800px;
		}
	</style>
</head>
<body>
<div id="top"></div>
<div class="container"></div>
<div class="container"></div>
	<div class="scroll-top"><a href="#top"><span></span>返回顶部</a></div>
</body>
</html>